<template>
	<view class="account-book-component-container">
		<u-scroll-list :indicator="indicator" indicatorColor="#fcf4cb" indicatorActiveColor="#f0df7c">
			<view class="account-book-category-container">
				<view :class="['account-book-category-item-container', {'select': item.selected}, {'not-select': !item.selected}]" v-for="(item, index) in accountBookList" :key="index" 
				 @click="select(item, index)" :style="{backgroundColor: item.iconColor}">
					<view class="account-book-up-acconut-book-name-container">{{item.name}}</view>	
					<view class="account-book-center-acconut-book-icon-container">
						<view class="account-book-center-acconut-book-icon-content iconfont icon-hongbao"></view>
					</view>
				</view>
			</view>
		</u-scroll-list>
	</view>
</template>

<script>
	import topTitleText from '@/components/top-title-text/top-title-text.vue';
	import {checkStrType2} from '@/util/regular/regular.js';
    export default {
		components: {
			topTitleText, 
		},
		props: {
			accountBookList: {
				type: Array,
				default: () => []
			}
		},
        data() {
            return {
				indicator: true,						// 是否显示位置
				bgcColor: [],							// 账本背景色 两种
				num: 0,									// 测试使用
            }
        },
		methods: {
			/** 点击选中账本
			 * @param {Object} item 对象
			 * @param {Object} index 索引
			 */
			select(item, index1) {
				this.$emit("selectAccountBook", item, index1);
			},
			// /** 返回背景颜色
			//  * @param {Object} index 索引
			//  */
			// getColor(index) {
			// 	var number = this.num++ % 2;
			// 	return this.bgcColor[number].bgcColor;
			// },
			/** 关闭本弹框
			 */
			closeBtn() {
				this.$emit("closeBtn");
			}
		},
    }
</script>

<style lang="scss">
	
	.account-book-component-container {
		width: 100%;
		height: 450rpx;
		padding: 50rpx 20rpx 20rpx 20rpx;
		box-sizing: border-box;
		
		.account-book-category-container {
			display: flex;
			padding-bottom: 20rpx;
			margin-top: 50rpx;
			
			.account-book-category-item-container {
				width: 200rpx;
				height: 270rpx;
				padding: 20rpx;
				box-sizing: border-box;
				margin-right: 30rpx;
				border-radius: 20rpx;
				box-shadow: 0px 0px 2px #dfdede;
				
				.account-book-up-acconut-book-name-container {
					width: 100%;
					height: 50%;
					box-sizing: border-box;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 28rpx;
					font-weight: bold;
					color: white;
				}
				
				.account-book-center-acconut-book-icon-container {
					width: 100%;
					height: 50%;
					display: flex;
					justify-content: center;
					align-items: center;
					font-weight: bold;
					color: $themeIconLightGreyColor;
					
					.account-book-center-acconut-book-icon-content {
						font-size: 70rpx;
						opacity: 0.5;
					}
				}
			}
			
			
			
			.select {
				border: 5rpx solid #409EFF;
			}
			
			.not-select {
				border: 5rpx solid white;
			}
		}
	}
	
</style>
